<template>
    <div id="home">

    <header>
      <van-nav-bar title="消息" > 
        <template #right>
          <van-icon name="search" size="18" />
        </template>
        <template #left>
          <p  @click="eliminate"> 清空未读</p>
        </template>
      </van-nav-bar>

      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        input-align="center"
        @focus="search"
      />
    </header>

    <main>

      <van-swipe-cell v-for="(item,index) in list">
      <van-cell-group>
        
        <van-badge :content="flag ? '5' : null">
            <van-image
              round
              width="3rem"
              height="3rem"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
        </van-badge>

        <div class="maintext">
        <p>{{item.name}}</p>
        <p>{{item.news}}</p>
        </div>
        <div class="maintime">
        {{item.time}}
        </div>
      </van-cell-group>
      <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="del(index)"/>
        </template>
    </van-swipe-cell>

    </main>
   
      <footer>
        <van-tabbar v-model="active">
            <van-tabbar-item name="home" icon="wap-home-o"  @click="home">战役</van-tabbar-item>
        <van-tabbar-item name="circle" icon="location-o" @click="circle">圈子</van-tabbar-item>
        <van-tabbar-item name="melancholy" icon="add-o"  @click="melancholy">寻医</van-tabbar-item>
        <van-tabbar-item name="news" icon="chat-o" >消息</van-tabbar-item>
        <van-tabbar-item name="mine" icon="smile-o"  @click="mine">我的</van-tabbar-item>
        </van-tabbar>
      </footer>
    </div>
</template>
  
  <script>
export default {
  data() {
    return {
      active: 'news',
      value:"",
      flag:true,
      list:[
        {
          id:1,
          name:'张美丽',
          news:'在吗在吗',
          time:"下午2:22",
          imgurl:"https://img01.yzcdn.cn/vant/cat.jpeg"
        },
        {
          id:2,
          name:'张三',
          news:'不在不在',
          time:"下午2:22",
          imgurl:"https://img01.yzcdn.cn/vant/cat.jpeg"
        },
        {
          id:3,
          name:'李四',
          news:'在的在的',
          time:"下午2:22",
          imgurl:"https://img01.yzcdn.cn/vant/cat.jpeg"
        },
      ]
    }
  },
  methods:{
    home(){
    this.$router.push("/home")
   },
   circle(){
    this.$router.push("/circle")
   },
   melancholy(){
    this.$router.push("/melancholy")
   },
   mine(){
    this.$router.push("/mine")
   },
   del(index){
    console.log(index);
    this.list.splice(index,1)
   },
   eliminate(){
    this.flag=false
   },
   search(){
    this.$router.push("/search")
   }
  }
    
}

  </script>

<style scoped lang="less">
.child {
    width: 40px;
    height: 40px;
    background: #f2f3f5;
    border-radius: 4px;
  }
  footer{
       .van-hairline--top-bottom{
         .van-tabbar-item{
           font-size: 16px;
         }
       }
     }
  main{
    .van-button{
      height: 100%;
    }
    .van-cell-group{
      display: flex;
      padding: 10px;
      position: relative;
      p{
        margin: 0;
      }
      .maintext{
        margin-left: 10px;
        p:nth-of-type(1){
          font-size: 16px;
          margin-bottom: 4px;
        }
        p:nth-of-type(2){
          font-size: 14px;
          color: #666666;
        }
      }
      .maintime{
        color:#666666;
        font-size: 12px;
        position: absolute;
        right:30px
      }
    }
  }

</style>